<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户编辑页面</title>
    <style>
        #editUserInfo{
            display: none;
        }
    </style>
</head>
<body>
<h1>用户信息编辑页面</h1>
<table id="tbl"></table>
<form id="editUserInfo">
    用户名：<input type="text" name="uname"><br>
    密码：<input type="password" name="pass"><br>
    <input type="hidden" name="line">
    <input type="button" value="确认修改" id="editOk">
</form>
<script>
    var tbl=document.querySelector("#tbl");
    var usersInfo=localStorage.getItem('users');//得到的是全部用户信息的字符串形式
    usersInfo=JSON.parse(usersInfo);//这里将上面的字符串形式转换为数组形式
    if(!usersInfo) {
        alert("用户信息为空");
        throw"用户信息为空";
    }
    function showTable(){
        var tbl_text=usersInfo.map(function(item,index){
        return`
        <tr id="${item.name}">
        <td>${item.name}</td>
        <td>${item.pass}</td>
        <td>
        <a href="javascript:edit('${item.name}',${index})">修改</a>
        </td>
        </tr>
        `;
    }).join("");
    tbl.innerHTML=tbl_text;
    }
    showTable();


    var fom=document.forms[0];
    function edit(id,index){

        fom.style.display="block";
        fom.uname.value=usersInfo[index].name;//将要修改的用户的姓名显示在表单中
        fom.pass.value=usersInfo[index].pass;
        fom.line.value=index;//知道修改的是第几行
    }
    editOk.onclick=function(e){
        //1、让表单隐藏
        fom.style.display="none";

        //2、要修改对应的行
        usersInfo[fom.line.value].name=fom.uname.value;
         usersInfo[fom.line.value].pass=fom.pass.value;

       // 3、修改的值要重新映射到表格
        showTable();

       // 4、修改的信息要重新存入到本地存储
        localStorage.setItem('users',JSON.stringify(usersInfo));
    }
</script>
</body>
</html>